VUE 项目优化 - 减小moment体积，IE11支持，ant-design, 减小首页体积 ​

减小moment.js的体积 ​

一般如果项目引入了moment.js或者引入的某个第三方插件包使用了moment.js， 通常情况下，会全部引入了所有语言包，体积过大，我们需按需引入，只打包我们需要的语言包，默认引入英文。

在vue.config.js中添加配置，

const webpack = require('webpack');

module.exports = {
    // 
    configureWebpack: {
        // externals:['moment'], //项目中引用了moment 不能使用
        plugins:[
            new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn/) //减小moment语言包体积
        ],
    //省略其他配置*
    }
	 //省略其他配置*
}

配置后，只保留了中文

当然更好的方案是使用现在新的库替代moment，如果情况允许的话，比如：day.js、date-fns；因为有些老的插件，库会依赖moment，因此我们做选择的时候就应该考虑到这点。

适配IE11 antd IE11下有问题 ​

我们项目是由我带着分研发小伙伴加外包一起弄的，我的首页比较简单没有引入大型框架，然而我们其他页面引用了，虽然也是按需引入，但是ant-design本身确实存在些问题。

某些组件，比如manu在 IE下会报错 ​

[Vue warn]: Error in render: "ReferenceError: “Symbol”未定义"；

这是由于antd本身写法是基于ES的Symbol，但是我们打包编译没有把这些高级语法转换成浏览器支持的语法，谷歌火狐都支持了该语法但是IE 并没有，所有我们需要使用Babel去转换。

添加polypill ​

看我们的小伙伴是直接在main.js里直接引入了core-js/stable 和 regenerator-runtime/runtime， 也没注释，不够优雅，趁现在有点时间，想改改。

import 'core-js/stable';
import 'regenerator-runtime/runtime';

因为我们使用的是vue的官方脚手架vue-cli，因此去查看官方文档，看到浏览器兼容性这一块，有可配置的项，

https://cli.vuejs.org/zh/guide/browser-compatibility.html#browserslist

里面讲得很清楚，我们可以选择配置browserslist， transpileDependencies，polyfills等 有三种方式，根据自身需要去配置：

如果你想直接转换某些第三方没有转换的依赖，比如我们明确得知道了and的包语法需要转译，因此我们可以直接添加配置：

transpileDependencies ​

• Type: Array<string | RegExp>

• Default: []

  默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来。

module.exports = {
    // babel polyfill  适配IE11
    transpileDependencies: [
        '@ant-design',
        'ant-design-vue'
    ],
}

这样我们在IE下就不会报错了，已经进行了polyfill。

ant-design 的 icons/lib 包全量引入了，还没处理成功 ​

按照antd官网的issue讨论的结果去尝试了下，没成功🤦‍♂️

https://github.com/ant-design/ant-design/issues/12011

https://github.com/ant-design/ant-design/issues/26371

https://stackoverflow.com/questions/48721290/ant-design-huge-imports

按照各位网友提供的新建了个icons.js export

然后配置了别名指向，一直报没有该模块，奇怪，不过我使用的ant-design-vue，没有使用ant-design, 只是也会去引用@ant-design/icons；

module.exports = {
  //...
  resolve: {
    alias: {
      "@ant-design/icons/lib/dist$": path.resolve(__dirname, "./src/icons.js")
    }
  }
};

感觉是ant-design-vue的问题，它的官网也写了，

更多讨论可参考：#10353。

⚠️ 1.2.0 之后我们全量引入了所有图标，导致 ant-design-vue 默认的包体积有一定增加，我们会在不远的未来增加新的 API 来实现图标的按需使用，更多相关讨论可关注：#12011。在此之前，你可以通过来自社区同学的 webpack 插件将图标文件拆分。

然后试了下 这个推荐的插件，原理也只是拆分包而已，并没有减小体积；但也没成功，竟然报react的antd包不存在🤦‍♂️，请求暂停～

现在还有另外两条路，降低版本，或者等待升级版本。坑 体积大了好几百K，gzip也多了147k。

拆分包，减小首页加载体积 ​

一般的，我们开发的时候就已经根据不同的模块拆分不同的包，路由懒加载等，vue-cli提供了便捷的方式，只需我们在配置路由的时候动态引入：

路由懒加载 ​

{
  path: '/模块a/home',
  name: 'home',
  component: () => import(/* webpackChunkName: "模块a" */ '@/views/Home.vue') //可以指定打包的模块名，将相同的模块的路由打包到同一个chunk
},

https://router.vuejs.org/zh/guide/advanced/lazy-loading.html#把组件按组分块

减少全局引入 ​

减少全局引入的CSS，js，以及某些首页没有使用的组件库；

这需要我们编写的时候要拆分好各个模块，css也是按照不同的功能，不同的模块去拆分，需要覆盖样式的话，也可以在页面里面去import；js也一样，还有某些模块，比如我写的首页其实是没有依赖大型框架的，没有ant-design-vue，但是我们写其他模块的小伙伴引用了（历史原因，我们本来是说要独立几个小项目，后面需要合一起，然后那段时间我请假了，别人合的，此处甩了个锅），而且是在main.js入口文件直接全局引入，虽然是按需引入，但也是增加了第一次加载的chunk体积；

import { Button,
         Menu, 
         Select,
        } from 'ant-design-vue';//TODO： 组件引用时引入，减小首页加载大小
Vue.use(Button);
Vue.use(Menu);
Vue.use(Select);

我们需要在使用的页面或组件里面去引入

某页面的.vue

import { Button } from 'ant-design-vue'
export default {
    name:'aptReport',
    components:{
    	Button
    }
    ///*
}

总的来说，如非必要，尽量避免在入口文件全局引入。

这样的话，总体体积可能会增加，但是首页的会减小，首页的响应时间也会更快。